<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        width: 100%;
        height: 100%;
      }
      .chat {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        -webkit-background-size: cover;
           -moz-background-size: cover;
             -o-background-size: cover;
                background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-color: gray;
      }
      .chat_bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: -webkit-gradient(
          linear,
          left top, left bottom,
          from(rgba(255, 255, 255, 0)),
          to(#19202c)
        );
        background-image: -webkit-linear-gradient(
          top,
          rgba(255, 255, 255, 0),
          #19202c
        );
        background-image: -moz-linear-gradient(
          top,
          rgba(255, 255, 255, 0),
          #19202c
        );
        background-image: -o-linear-gradient(
          top,
          rgba(255, 255, 255, 0),
          #19202c
        );
        background-image: linear-gradient(
          to bottom,
          rgba(255, 255, 255, 0),
          #19202c
        );
      }

      .chat_msg {
        width: 6rem;
        height: 1.4rem;
        position: absolute;
        top: 0.6rem;
        right: 0.3rem;
        text-align: right;
        font-size: 0.28rem;
        line-height: 0.37rem;
        color: #fff;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
        -webkit-justify-content: flex-end;
           -moz-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        -webkit-box-align: center;
        -webkit-align-items: center;
           -moz-box-align: center;
            -ms-flex-align: center;
                align-items: center;
      }
      .chat_msg p {
        -o-text-overflow: ellipsis;
           text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .chat_msg_title {
        font-size: 0.48rem;
        line-height: 0.67rem;
        margin-bottom: 0.1rem;
      }
      .chat_msg > img {
        width: 1.4rem;
        height: 1.4rem;
        margin-left: 0.1rem;
        -webkit-border-radius: 50%;
           -moz-border-radius: 50%;
                border-radius: 50%;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class="chat" id="headImg">
      <div class="chat_bg"></div>
      <div class="chat_msg" id="chatInfo">
        <div>
          <p class="chat_msg_title">
            <span data-user style="display: none;">用户:</span>
            <span data-group style="display: none;">群组:</span>
            <span id="name">-</span>
          </p>
          <p id="desc"></p>
        </div>
        <img src="" id="headImg1" alt="Head">
      </div>
    </div>
  </body>
  <script>
    !function (w) {
      var e = w.document,
        t = e.documentElement,
        i = 750,
        o = "orientationchange" in w ? "orientationchange" : "resize",
        a = function () {
          var cw = t.clientWidth || document.body.clientWidth;
          t.style.fontSize = cw / i * 100 + "px"
        };
      e.addEventListener && (w.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1));
      e.body.style.fontSize = '0.28rem';
    }(window);
    apiready = function () {
      var data = api.pageParam;
      document.querySelectorAll('.chat_msg')[0].style.paddingTop = api.safeArea.top + 'px'
      document.getElementById('headImg').style.backgroundImage = 'url(' + data.photo + ')'
      document.getElementById('headImg1').src = data.photo
      document.getElementById('name').innerText = data.name
      if (data.isCall) {
        document.getElementById('desc').innerText = '正在等待对方接受'
      } else {
        document.getElementById('desc').innerText = '邀请你视频通话'
      }
      if (data.isGroup) {
        document.querySelectorAll('span[data-group]')[0].style.display = 'inline'
      } else {
        document.querySelectorAll('span[data-user]')[0].style.display = 'inline'
      }

      api.addEventListener({
        name: 'chatDataEvent',
      }, function (ret) {
        console.log('receipt form chatDataEvent:' + JSON.stringify(ret))
        if (ret) {
          if (ret.value.photo) {
            document.getElementById('headImg').style.backgroundImage = 'url(' + ret.value.photo + ')'
            document.getElementById('headImg1').src = ret.value.photo
          }
          if (ret.value.name) {
            document.getElementById('name').innerText = ret.value.name
          }
          if (ret.value.didConnect) {
            document.getElementById('chatInfo').style.display = 'none'
          }
        }
      })
    }
  </script>
</html>
